<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="费用名称">
              <a-input v-model="queryFeeName" placeholder="请输入费用名称" :allowClear=true></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="querydata()">查询</a-button>
              <a-button v-has="'fee:approved'" type="default" style="margin-left: 10px"
                        @click="batchApproved()">批量通过</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>

      <a-table v-has="'fee:approved'"
               :rowClassName="rowClassName"
               ref="table"
               size="small"
               :scroll="{x:300,y:350}"
               :components="components"
               bordered
               rowKey="id"
               :pagination="false"
               :loading="tableLoading"
               :columns="columns"
               :dataSource="datalist"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap">


        <span slot="action" slot-scope="text, record">
          <a @click="approved(record)">审核通过</a>

          <a-divider type="vertical" />
           <a-popconfirm
             title="确定要驳回此费用？"
             ok-text="确定"
             cancel-text="取消"
             @confirm="showModal(record)"
           >
              <a href="#">驳回</a>
            </a-popconfirm>

        </span>

      </a-table>

      <a-table v-has="'fee:default'"
               :rowClassName="rowClassName"
               ref="table"
               size="small"
               :pagination="false"
               :scroll="{x:300,y:350}"
               :components="components"
               bordered
               rowKey="id"
               :loading="tableLoading"
               :columns="defColumns"
               :dataSource="datalist"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               class="j-table-force-nowrap">

      </a-table>
    </div>
    <a-modal centered v-model="accountvisible" title="请选择要驳回的账号" @ok="handleOk">
      <a-table
        ref="table"
        size="small"
        :scroll="{x:true,y:300}"
        bordered
        rowKey="id"
        :columns="userColumns"
        :dataSource="userDataSource"
        :pagination="false"
        :rowSelection="{selectedRowKeys: userSelectedRowKeys, onChange: onUserSelectChange,type:'radio'}"
        class="j-table-force-nowrap">
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'

export default {
  name: 'DeelFeeNameDataList',
  components: {},
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }
    return {
      selectRejectId: '',
      userColumns: [
        {
          title: '用户账号',
          dataIndex: 'userName',
          width: 200,
          align: 'center'
        }
      ],
      userDataSource: [],
      queryFeeName: '',
      accountvisible: false,
      description: '费用名称数据库管理页面',
      datalist: [],
      selectedRowKeys: [],
      userSelectedRowKeys: [],
      userSelectedRow: [],
      tableLoading: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '费用名称',
          align: 'left',
          width: 200,
          dataIndex: 'feeName'
        },
        {
          title: '提交人',
          width: 100,
          align: 'center',
          dataIndex: 'submitUser'
        },
        {
          title: '状态',
          align: 'center',
          width: 60,
          dataIndex: 'status',
          customRender: function(text, record) {
            if (text == 2) {
              return '待审核'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      defColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '费用名称',
          align: 'left',
          width: 200,
          dataIndex: 'feeName'
        },
        {
          title: '提交人',
          width: 100,
          align: 'center',
          dataIndex: 'submitUser'
        },
        {
          title: '状态',
          align: 'center',
          width: 60,
          dataIndex: 'status',
          customRender: function(text, record) {
            if (text == 2) {
              return '待审核'
            }
          }
        }
      ],
      url: {
        list: '/fee/progress',
        delete: '/feedata/feeNameData/delete',
        deleteBatch: '/feedata/feeNameData/deleteBatch',
        batchApproved: '/fee/approved',
        reject: '/fee/reject',
        exportXlsUrl: '/feedata/feeNameData/exportXls',
        importExcelUrl: 'feedata/feeNameData/importExcel'

      },
      dictOptions: {}
    }
  },
  created() {
    this.querydata()
  },
  computed: {},
  methods: {
    querydata() {
      var that = this
      that.tableLoading = true
      // let parm = {
      //   type: 0
      // }
      let param = {}
      if (this.queryFeeName) {
        param = { feeName: this.queryFeeName }
      }
      let LOGIN_USER_BUTTON_AUTH = sessionStorage.getItem('LOGIN_USER_BUTTON_AUTH')
      let listAuth = JSON.parse(LOGIN_USER_BUTTON_AUTH)
      for (let i = 0; i < listAuth.length; i++) {
        if (listAuth[i].action == 'fee:approved') {
          param.type = 1
          break
        }
      }
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
          that.datalist = res.result
          that.datalist.map(function(data, K) {
            data.key = data.id
          })
          // that.$message.success(res.message)
          // that.$emit('allOk')

          // that.selectAll()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
        that.tableLoading = false
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onUserSelectChange(selectedRowKeys, selectedRows) {
      this.userSelectedRowKeys = selectedRowKeys
      this.userSelectedRow = selectedRows
    },
    showModal(record) {
      this.selectRejectId = record.id
      this.accountvisible = true
      getAction('/fee/getuserlist').then(res => {
        if (res.success) {
          this.userDataSource = res.result
        }
      })
    },
    //驳回
    handleOk(e) {
      if (this.userSelectedRow.length == 1) {
        let param = {
          userName: this.userSelectedRow[0].userName,
          id: this.selectRejectId
        }
        httpAction(this.url.reject, param, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.queryFeeName = ''
            this.querydata()
            this.accountvisible = false
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // that.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择一个要驳回的账号')
      }
    },
    initDictConfig() {
    },
    batchApproved() {
      if (this.selectedRowKeys.length > 0) {
        let param = {
          ids: this.selectedRowKeys
        }
        httpAction(this.url.batchApproved, param, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.queryFeeName = ''
            this.querydata()
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // that.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择要审核数据')
      }
    },
    approved(record) {
      let param = {
        ids: [record.id]
      }
      httpAction(this.url.batchApproved, param, 'post').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.queryFeeName = ''
          this.querydata()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // that.confirmLoading = false
      })
    },
    rowClassName(record, index) {
      return 'dark-row-1'
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.ant-table {
  min-height: 350px !important;
}

.ant-empty-normal {
  margin: 140px 0 !important;
}

.dark-row-1 {
  background-color: #fff1cf;
}
</style>
<style lang="less">
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>